{%extends "base.html"%}
{%block title%}
Remote Judge 账户设定
{%endblock%}
{%block body%}
<template id="account-editor-component">

    <div class="ui form">
        <div class="ui field">
            <label>账户ID</label>
            <div>{[accountID]}</div>
        </div>
        <div class="ui field">
            <label>用户名</label>
            <div class="ui input">
                <input type="text" v-model="username" v-on:input="emitChanges">
            </div>
        </div>
        <div class="ui field">
            <label>密码</label>
            <div class="ui input">
                <input type="password" v-model="password" v-on:input="emitChanges">
            </div>
        </div>
        <div class="ui field">
            <label>远程OJ</label>
            <div class="ui compact menu">
                <div class="ui simple dropdown item">
                    {[availables[oj].display]}
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <a class="item" v-for="value,key in availables" v-on:click="updateOJ(key)">
                            {[value.display]}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    let accountEdit;
    Vue.component("account-editor", {
        template: $("#account-editor-component").html(),
        delimiters: ["{[", "]}"],
        watch: {
            account(newOne, oldOne) {
                this.accountID = this.account.accountID;
                this.username = this.account.username;
                this.password = this.account.password;
                this.oj = this.account.oj;
            }
        },
        data() {
            return {
                accountID: this.account.accountID,
                username: this.account.username,
                password: this.account.password,
                oj: this.account.oj
            }
        },
        props: {
            account: Object,
            availables: Object
        }, methods: {
            updateOJ(target) {
                this.oj = target;
                this.emitChanges();
            },
            emitChanges() {
                this.$emit("changedata", {
                    accountID: this.accountID,
                    username: this.username,
                    password: this.password,
                    oj: this.oj
                })
            }
        }
    })
    $(document).ready(() => {

        accountEdit = new Vue({
            el: "#account-edit",
            delimiters: ["{[", "]}"],
            data: {
                availableOJs: {},
                accounts: {},
                currentAccount: "",
                done: false, successMessage: ""
            }, methods: {
                test(x) {
                    console.log(x);
                },
                changeData(val) {
                    Vue.set(this.accounts, val.accountID, val);
                },
                addAccount() {
                    this.successMessage = "";
                    axios.post("/api/remote_judge/add_account").then(resp => {
                        // let data = resp.data.data;
                        let ret = resp.data;

                        if (ret.code) {
                            showErrorModal(ret.message);
                            return;
                        }
                        Vue.set(this.accounts, ret.data.accountID, {
                            username: "",
                            password: "",
                            accountID: ret.data.accountID,
                            oj: Object.keys(this.availableOJs)[0]
                        });
                    });
                }, removeAccount(accountID) {
                    this.successMessage = "";
                    axios.post("/api/remote_judge/remove_account", { accountID: accountID }).then(resp => {
                        let ret = resp.data;
                        if (ret.code) {
                            showErrorModal(ret.message);
                            return;
                        }
                        this.currentAccount = "";
                        Vue.delete(this.accounts, accountID);
                    });
                }, submit() {
                    let accounts = Object.keys(this.accounts).map(key => this.accounts[key]);
                    this.successMessage = "";
                    axios.post("/api/remote_judge/update_accounts", { accounts: accounts }).then(resp => {
                        let respData = resp.data;
                        if (respData.code) {
                            showErrorModal(respData.message);
                            return;
                        }
                        this.successMessage = respData.message;
                        return;
                    });
                }
            }, mounted() {
                axios.post("/api/remote_judge/get_accounts").then(ret => {
                    let data = ret.data.data;
                    if (data.code) {
                        showErrorModal(data.message);
                        return;
                    }
                    this.availableOJs = data.availableOJs;
                    for (let item of data.accounts) this.$set(this.accounts, item.accountID, item);
                    this.done = true;
                });
            }
        });
    });

</script>
<div style="top:10%;" id="account-edit" v-if="done">
    <div class="ui header">
        <h2>Remote Judge 账户编辑</h2>
    </div>
    <div class="ui stacked segment">
        <div class="ui two column grid">
            <div class="ui column" style="max-width: 250px;;">
                <div class="ui one column grid">
                    <div class="ui column">
                        <div class="ui fluid vertical menu">
                            <a class="item" v-for="item,key in accounts"
                                v-bind:class="{active:currentAccount==item.accountID}"
                                v-on:click="currentAccount=item.accountID,test(item.accountID)">
                                <!-- {[item]} -->
                                {[item.username]} - {[availableOJs[item.oj].display]}
                            </a>
                        </div>
                    </div>
                    <div class="ui center aligned column">
                        <div class="ui buttons">
                            <div class="ui tiny green icon button" v-on:click="addAccount">
                                <i class="plus icon"></i>
                            </div>
                            <div class="ui tiny red icon button"
                                v-on:click="removeAccount(accounts[currentAccount].accountID)">
                                <i class="times icon"></i>
                            </div>
                            <div class="ui green icon button" v-on:click="submit">
                                <i class="save icon"></i>
                            </div>
                        </div>
                        <div class="ui success message" v-if="successMessage!=''">{[successMessage]}</div>
                    </div>
                </div>
            </div>
            <div class="ui column">
                <account-editor v-if="currentAccount!=''" v-bind:account="accounts[currentAccount]"
                    v-bind:availables="availableOJs" v-on:changedata="changeData">
                </account-editor>
                <div v-else>
                    <div class="center aligned middle aligned text container">
                        这里还什么都没..
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{%endblock%}